$(function () {
  $("#ce").stop().animate({ top: "0", right: "0" }, 500);
  let id = localStorage.getItem("data-id");
  $.ajax({
    url: "http://jx.xuzhixiang.top/ap/api/detail.php",
    type: "get",
    data: { id: id },
    success: function (data) {
      let skr = data.data;
      console.log(skr);
      let str = "";

      str = `<div id="xiangzuo">
                <div id="zoomBox">
                    <div id="midArea">
                        <img src="${skr.pimg}" />
                        <div id="zoom"></div>
                    </div>
                </div>
                <div id="bigArea">
                    <img src="${skr.pimg}" />
                </div>
                <div id="smallArea">
                    <img src="${skr.pimg}" />
                    <img src="${skr.pimg}" />
                </div>
            </div>
            <div id="xiangyou">
                <p>${skr.pname}</p>
                <p>${skr.pname}</p>
                <p>活动价</p>
                <span>￥${skr.pprice}</span>
                <span>￥230.00</span><br>
                <span id="jian">-</span>
                <input type="text" id="text" value="1">
                <span id="jia">+</span><br>
                <a href="gouwuche.html">
                <input type="button" value="加入购物车" id="btn">
                </a>
            </div>`;

      $("#xiang2").html(str);
    },
  }).then(function () {
    let a = 1;
    $("#jia").click(function () {
      a += 1;
      $("#text").val(a);
    });
    $("#jian").click(function () {
      a -= 1;
      $("#text").val(a);
      if (a <= 1) {
        a = 1;
        $("#text").val(a);
      }
    });
    $("#btn").click(function () {
      let b = $("#text").val();
      let c = localStorage.getItem("uid");
      $.ajax({
        url: "http://jx.xuzhixiang.top/ap/api/add-product.php",
        type: "get",
        data: { uid: c, pid: id, pnum: b },
        success: function () {},
      });
    });
    class Zoom {
      constructor() {
        this.zoomBox = document.getElementById("zoomBox");
        this.midArea = document.getElementById("midArea");
        this.midImg = this.midArea.children[0];
        this.zoom = document.getElementById("zoom");
        this.bigArea = document.getElementById("bigArea");
        this.bigImg = this.bigArea.children[0];
        this.smallArea = document.getElementById("smallArea");
        this.smallImg = this.smallArea.children;
        this.showAndHid();
        this.move();
        this.changeImg();
      }
      showAndHid() {
        this.midArea.onmouseover = () => {
          this.zoom.style.display = "block";
          this.bigArea.style.display = "block";
        };
        this.midArea.onmouseout = () => {
          this.zoom.style.display = "none";
          this.bigArea.style.display = "none";
        };
      }
      move() {
        this.midArea.onmousemove = (e) => {
          let evt = e || event;
          let x = evt.clientX - this.zoomBox.offsetLeft - this.zoom.offsetWidth;
          let y =
            evt.clientY - this.zoomBox.offsetTop - this.zoom.offsetHeight - 100;

          if (x <= 0) {
            x = 0;
          }
          if (y <= 0) {
            y = 0;
          }
          if (x >= this.midArea.offsetWidth - this.zoom.offsetWidth) {
            x = this.midArea.offsetWidth - this.zoom.offsetWidth;
          }
          if (y >= this.midArea.offsetHeight - this.zoom.offsetHeight) {
            y = this.midArea.offsetHeight - this.zoom.offsetHeight;
          }
          this.zoom.style.left = x + "px";
          this.zoom.style.top = y + "px";

          let bl = this.midArea.offsetWidth / this.zoom.offsetWidth;

          this.bigImg.style.left = -this.zoom.offsetLeft * bl + "px";
          this.bigImg.style.top = -this.zoom.offsetTop * bl + "px";
        };
      }
      changeImg() {
        for (let i = 0; i < this.smallImg.length; i++) {
          this.smallImg[i].onclick = () => {
            this.midImg.src = this.bigImg.src = this.smallImg[i].src;
          };
        }
      }
    }
    let zoom = new Zoom();
  });
});
